<template>
	<view>
		 <!-- :class="{'more-slider-animation':isShowMoreBox,'emoji-slider-animation':isShowEmojiBox}" -->
		<view class='chat-room-box' >

			<view class='chat-fun-bar'>
				<view @tap="toggleRecordModal" class='chat-room-icon-box'>
					<span class="icon iconfont icon-yuyin chat-room-icon" ></span>
				</view>
				<view>
					<textarea class='chat-fun-input' type="text" v-model="inputMessage" @tap="focus" @focus="focus" @input="bindMessage" @confirm="sendMessage"
					@blur="blur" ></textarea>
					
				</view>
				<view class='char-fun-barRight'>
					<view class='chat-room-icon-box'>
						<span class='icon iconfont icon-biaoqing1 chat-room-icon' @tap="openEmojiBox"></span>
					</view>
					<view class='chat-room-icon-box' style='margin-left:20upx'>
						<span class='icon iconfont icon-icon chat-room-icon' @tap="openMoreBox"></span>
					</view>
					<view class='chat-room-icon-box' >
						<view class="send-msg-btn" @tap="sendMessage">发送</view>
						<!-- <span class='icon iconfont icon-icon chat-room-icon' @tap="openMoreBox"></span> -->
					</view>
				</view>
			</view>
			<view class='chat-room-content'>
				<view class='chat-fun-box' v-if="isShowEmojiBox">
					<swiper class='chat-fun-swiper' :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
						<block>
							<swiper-item v-for="(item,index) in emojiList" :key='index'>
								<view class='emoji-img-box'>
									 <div class='emoji-img' v-for="(subItem,index) in item" @tap="emojiAction"
										 :data-emoji="subItem">{{subItem}}</div>
									<!-- <view class="emoji-img-row" v-for="(subItem,index) in item"> -->
										<!-- <image v-for="(item,index) in emojiObj.map1" :src="emojiObj.path + item" :key='index' @tap="emojiAction"
										 :data-emoji="index" class='emoji-img' /> -->
										
									<!-- </view> -->
								<!-- 	<view class="emoji-img-row">
										<image v-for="(item,index) in emojiObj.map2" :src="emojiObj.path + item" :key='index' @tap="emojiAction"
										 :data-emoji="index" class='emoji-img' />
									</view>
									<view class="emoji-img-row">
										<image v-for="(item,index) in emojiObj.map4" :src="emojiObj.path + item" :key='index' @tap="emojiAction"
										 :data-emoji="index" class='emoji-img' />
									</view>
									<view class="emoji-img-row">
										<image v-for="(item,index) in emojiObj.map3" :src="emojiObj.path + item" :key='index' @tap="emojiAction"
										 :data-emoji="index" class='emoji-img' />
									</view> -->
									
								</view>
							</swiper-item>
						</block>
						<!-- <block class="second">
							<swiper-item >
								<view class='emoji-img-box'>
									
									<view class="emoji-img-row">
										<image v-for="(item,index) in emojiObj.map5" :src="emojiObj.path + item" :key='index' @tap="emojiAction"
										 :data-emoji="index" class='emoji-img' />
									</view>
									<view class="emoji-img-row">
										<image v-for="(item,index) in emojiObj.map6" :src="emojiObj.path + item" :key='index' @tap="emojiAction"
										 :data-emoji="index" class='emoji-img' />
									</view>
								</view>
							</swiper-item>
						</block> -->
					</swiper>

				</view>
				<view class='chat-fun-box'  v-if="isShowMoreBox">
					<swiper class='chat-fun-swiper' :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
					 :duration="duration">
						<swiper-item >
							<view class='chat-more-box'>
								<view class='chat-more-item' @tap='sendImage' data-type=1>
									<view class='chat-more-img'>
										<view class="icon iconfont icon-xiangce chat-more-font"></view>
									</view>
									<view class='chat-more-text'>相册</view>
								</view>
								<view class='chat-more-item' @tap='openCamera' data-type=2>
									<view class='chat-more-img'>
										<view class="icon iconfont icon-paishe_A_Facet chat-more-font"></view>
									</view>
									<view class='chat-more-text'>拍摄</view>
								</view>
								<view class='chat-more-item' @tap='sendMessageLocation' data-type=3>
									<view class='chat-more-img'>
										<view class="icon iconfont icon-weizhi8 chat-more-font"></view>
									</view>
									<view class='chat-more-text'>位置</view>
								</view>
								<view class='chat-more-item' @tap='toMyCard' data-type=4>
									<view class='chat-more-img'>
										<image src="/static/user.png" class='chat-more-font' style="width:80upx;height:80upx"></image>
										<!-- <view class="icon iconfont icon-biaoqing chat-more-font"></view> -->
									</view>
									<view class='chat-more-text'>名片</view> 
								</view>



							</view>
						</swiper-item>

					</swiper>
				</view>
			</view>
			
		</view>
		<!-- <view class="room_bar">
		<chat-suit-emoji ref="emoji" @newEmojiStr="emojiAction"></chat-suit-emoji>
		<chat-suit-more ref="more" @openCamera="openCamera" @sendImage="sendImage" @sendMessageLocation="sendMessageLocation"></chat-suit-more>
		<chat-suit-main ref="main" :username="username" :chatType="chatType" @inputBlured="inputBlured" @inputFocused="cancelEmoji"></chat-suit-main>
		<chat-suit-image ref="image" :username="username" :chatType="chatType"></chat-suit-image>
		<view class="other_func">
			<view class="v-record" @tap="toggleRecordModal">
				<span class="icon iconfont icon-yuyin font_group_size_small"></span>
			</view>
			<textarea class="f news" type="text" v-model="inputMessage" cursor-spacing="65" confirm-type="send" placeholder=" "
			 placeholder-style="color:#CFCFCF; padding-left:5px;" @tap="focus" @focus="focus" @input="bindMessage" @confirm="sendMessage"
			 @blur="blur" />
			</textarea>
			<view class="open_emoji" @tap="openEmoji">
				<span class="icon iconfont icon-biaoqing1 font_group_size"></span>
			</view>
			<view class='v-record mg-common' v-if="input_status==1" @tap="openMore">
				<span class="icon iconfont icon-icon font_group_size"></span>
			</view>
			<button class="send_btn_msg" @tap="sendMessage" v-else>发送</button>
		</view>
	</view> -->
	<chat-suit-image ref="image" :username="username" :chatType="chatType" v-show="isShow"></chat-suit-image>
	<chat-suit-main ref="main" :username="username" :chatType="chatType" @inputBlured="inputBlured" @inputFocused="cancelEmoji" v-show="isShow"></chat-suit-main>
	</view>
</template>

<script>
	let RecordStatus = require("./suit/audio/record_status").RecordStatus;
	let msgType = require("../msgtype");

	/*位置新增*/
	let WebIM = require("../../../utils/WebIM")["default"];
	/*位置新增*/
	import chatSuitMain from "@/comps/chat/inputbar/suit/main/main.vue";
	import chatSuitEmoji from "@/comps/chat/inputbar/suit/emoji/emoji.vue";
	import chatSuitMore from "@/comps/chat/inputbar/suit/more/more.vue";
	import chatSuitImage from "@/comps/chat/inputbar/suit/image/image.vue";

	export default {
		components: {
			chatSuitMain,
			chatSuitImage,
			chatSuitEmoji,
			chatSuitMore
		},
		props: {
			selectMember:{
				type: Object,
				value: null
			},
			username: {
				type: Object,
				value: {}
			},
			chatType: {
				type: String,
				value: msgType.chatType.SINGLE_CHAT,
			},
		},
		data() {
			return {
				emojiList:[],
				isShow:false,
				emoji: WebIM.Emoji,
				emojiObj: WebIM.EmojiObj,
				isShowEmojiBox:false,
				isShowMoreBox: false,
				interval: 5000,
				duration: 1000,
				autoplay: false,
				indicatorDots: true, // 显示面板指示点
				recordStatus: RecordStatus.HIDE,
				RecordStatus,
				/*input的输入框值*/
				inputMessage: '', // render input 的值
				userMessage: "", // input 的实时值
				input_status: 1,
				open_type_action: 0, //表情窗口还是更多窗口打开
			}
		},
		created() {

		},

		onReady() {
			this.initEmojiList();
		},
		watch:{ 
			inputMessage(newVal){
				console.log(this)
				if(newVal[newVal.length - 1] === "@"){
					this.$emit("gotoMember")
				}
			},
			selectMember(newVal){
				console.log(newVal);
				this.inputMessage = this.inputMessage + newVal.nickName + " " 
			},
		},
		methods: {
			initEmojiList(){
				const list = [
					        "😀",
					        "😃",
					        "😄",
					        "😁",
					        "😆",
					        "😅",
					        "🤣",
					        "😂",
					        "🙂",
					        "🙃",
					        "😉",
					        "😊",
					        "😇",
					        "😍",
					        "🤩",
					        "😘",
					        "😗",
					        "😚",
					        "😙",
					        "😋",
					        "😛",
					        "😜",
					        "🤪",
					        "😝",
					        "🤑",
					        "🤗",
					        "🤭",
					        "🤫",
					        "🤔",
					        "🤐",
					        "🤨",
					        "😐",
					        "😑",
					        "😶",
					        "😏",
					        "😒",
					        "🙄",
					        "😬",
					        "🤥",
					        "😌",
					        "😔",
					        "😪",
					        "🤤",
					        "😴",
					        "😷",
					        "🤒",
					        "🤕",
					        "🤢",
					        "🤮",
					        "🤧",
					        "😵",
					        "🤯",
					        "🤠",
					        "😎",
					        "🤓",
					        "🧐",
					        "😕",
					        "😟",
					        "🙁",
					        "😮",
					        "😯",
					        "😲",
					        "😳",
					        "😦",
					        "😧",
					        "😨",
					        "😰",
					        "😥",
					        "😢",
					        "😭",
					        "😱",
					        "😖",
					        "😣",
					        "😞",
					        "😓",
					        "😩",
					        "😫",
					        "😤",
					        "😡",
					        "😠",
					        "🤬",
					        "😈",
					        "👿",
					        "💀",
					        "💩",
					        "🤡",
					        "👹",
					        "👺",
					        "👻",
					        "👽",
					        "👾",
					        "🤖",
					        "😺",
					        "😸",
					        "😹",
					        "😻",
					        "😼",
					        "😽",
					        "🙀",
					        "😿",
					        "😾",
					        "💋",
					        "👋",
					        "🤚",
					        "🖐",
					        "✋",
					        "🖖",
					        "👌",
					        "🤞",
					        "🤟",
					        "🤘",
					        "🤙",
					        "👈",
					        "👉",
					        "👆",
					        "🖕",
					        "👇",
					        "👍",
					        "👎",
					        "✊",
					        "👊",
					        "🤛",
					        "🤜",
					        "👏",
					        "🙌",
					        "👐",
					        "🤲",
					        "🤝",
					        "🙏",
					        "💅",
					        "🤳",
					        "💪",
					        "👂",
					        "👃",
					        "🧠",
					        "👀",
					        "👁",
					        "👅",
					        "👄",
					        "👶",
					        "🧒",
					        "👦",
					        "👧",
					        "🧑",
					        "👱",
					        "👨",
					        "🧔",
					        "👱‍",
					        "👨‍",
					        "👨‍",
					        "👨‍",
					        "👨‍",
					        "👩",
					        "👱‍",
					        "👩‍",
					        "👩‍",
					        "👩‍",
					        "👩‍",
					        "🧓",
					        "👴",
					        "👵",
					        "🙍",
					        "🙍‍",
					        "🙍‍",
					        "🙎",
					        "🙎‍",
					        "🙎‍",
					        "🙅",
					        "🙅‍",
					        "🙅‍",
					        "🙆",
					        "🙆‍",
					        "🙆‍",
					        "💁",
					        "💁‍",
					        "💁‍",
					        "🙋",
					        "🙋‍",
					        "🙋‍",
					        "🙇",
					        "🙇‍",
					        "🙇‍",
					        "🤦",
					        "🤦‍",
					        "🤦‍",
					        "🤷",
					        "🤷‍",
					        "🤷‍",
					       
					        "👮",
					        "👮‍♂️",
					        "👮‍♀️",
					        "🕵",
					        "🕵️‍♂️",
					        "🕵️‍♀️",
					        "💂",
					        "💂‍",
					        "💂‍",
					        "👷",
					        "👷‍",
					        "👷‍",
					        "🤴",
					        "👸",
					        "👳",
					        "👳‍",
					        "👳‍",
					        "👲",
					        "🧕",
					        "🤵",
					        "👰",
					        "🤰",
					        "🤱",
					        "👼",
					        "🎅",
					        "🤶",
					        "🧙",
					        "🧙‍",
					        "🧙‍",
					        "🧚",
					        "🧚‍",
					        "🧚‍",
					        "🧛",
					        "🧛‍",
					        "🧛‍",
					        "🧜",
					        "🧜‍",
					        "🧜‍",
					        "🧝",
					        "🧝‍",
					        "🧝‍",
					        "🧞",
					        "🧞‍",
					        "🧞‍",
					        "🧟",
					        "🧟‍",
					        "🧟‍",
					        "💆",
					        "💆‍",
					        "💆‍",
					        "💇",
					        "💇‍",
					        "💇‍",
					        "🚶",
					        "🚶‍",
					        "🚶‍",
					        "🏃",
					        "🏃‍",
					        "🏃‍",
					        "💃",
					        "🕺",
					        "🕴",
					        "👯",
					        "👯‍",
					        "👯‍",
					        "🧖",
					        "🧖‍",
					        "🧖‍",
					        "🧘",
					        "👭",
					        "👫",
					        "👬",
					        "💏",
					        "👨‍",
					        "👩‍",
					        "💑",
					        "👨‍",
					        "👩‍",
					        "👪",
					        
					        "🗣",
					        "👤",
					        "👥",
					        "👣",
					        "🌂",
					        "☂",
					        "👓",
					        "🕶",
					        "👔",
					        "👕",
					        "👖",
					        "🧣",
					        "🧤",
					        "🧥",
					        "🧦",
					        "👗",
					        "👘",
					        "👙",
					        "👚",
					        "👛",
					        "👜",
					        "👝",
					        "🎒",
					        "👞",
					        "👟",
					        "👠",
					        "👡",
					        "👢",
					        "👑",
					        "👒",
					        "🎩",
					        "🎓",
					        "🧢",
					        "⛑",
					        "💄",
					        "💍",
					        "💼"
					      
				];
				let arr = [];
				let newArr = []
				list.forEach((item,index)=>{
					
					if(index % 28  === 0 && index !== 0){
						newArr.push(arr);
						arr = [];
					}
					arr.push(item);
				})
				this.emojiList = newArr;
				console.log(this.emojiList)
			},
			isGroupChat() {
				return this.chatType == msgType.chatType.CHAT_ROOM;
			},
			getSendToParam() {
				return this.isGroupChat() ? this.username.groupId : this.username.your;
			},
			// bindinput 不能打冒号！
			bindMessage(e) {
				/*判断显示发送按钮*/
				if (e.detail.value) {
					this.input_status = 2;
				} else {
					this.input_status = 1;
				}
				this.userMessage = e.detail.value
			},
			toMyCard(){
				console.log("执行条状")
				uni.navigateTo({
					url:"/pages/user-center/my-collect/my-collect"
				})
			},
			/*发送位置信息*/
			sendMessageLocation() {
				this.commonMessageTxt();
				// this.commonMessageLocation(); 

				/*隐藏表情*/
				// this.$refs.emoji.cancelEmoji();
				//影藏更多窗口
				// this.$refs.more.cancelMore();
			},
			/*发送位置信息*/
			/*发送位置文本消息*/
			/*发送消息*/
			sendMessage() {
				let me = this,
					that = this;

				String.prototype.trim = function() {
					return this.replace(/(^\s*)|(\s*$)/g, '');
				}
				if (!this.userMessage.trim()) {
					return;
				}
				let id = this.$im.conn.getUniqueId();
				let msg = new this.$im.message(msgType.TEXT, id);
				msg.set({
					msg: this.userMessage,
					from: this.username.myName,
					to: this.getSendToParam(),
					roomType: false,
					chatType: this.chatType,
					ext:{
						userInfo:uni.getStorageSync("userInfo"),
					},
					success(id, serverMsgId) {
						//console.log('成功了')
						disp.fire('em.chat.sendSuccess', id, me.userMessage);
						//发送成功后更新input的值
						console.log('发送成功');

					},
					fail(id, serverMsgId) {
						console.log('失败了')
					}
				});
				if (this.chatType == msgType.chatType.CHAT_ROOM) {
					msg.setGroup("groupchat");
				}
				try {
					console.log('发送了msg.body');
					this.$im.conn.send(msg.body);
					that.input_status = 1;
				} catch (e) {
					console.log(e);
				}

				uni.$emit('saveSendMsg', {
					msg: msg,
					type: msgType.TEXT,
				})
				this.userMessage = '';
				this.inputMessage = '';
			},
			commonMessageTxt() {
				var that = this,
					me = this;
				uni.chooseLocation({
					success: (respData) => {
						console.log(respData)
						if (respData.address) {
							// var id = WebIM.conn.getUniqueId();
							let id = that.$im.conn.getUniqueId();
							//var msg = new WebIM.message(msgType.LOCATION, id);
							let msg = new that.$im.message(msgType.TEXT, id);
							console.log('respData的值', respData);
							msg.set({
								// location 需要消息值吗？写死不行？
								msg: '位置:' + respData.address,
								// from: me.data.username.myName,
								from: this.username.myName,
								// to: me.getSendToParam(),
								to: this.getSendToParam(),
								roomType: false,
								ext: {
									"userInfo":uni.getStorageSync("userInfo"),
									"lng": respData.longitude,
									"lat": respData.latitude,
									"addr": respData.address,
								},
								// lng: respData.longitude,
								// lat: respData.latitude,
								// addr: respData.address,
								// chatType: me.data.chatType,
								chatType: this.chatType,
								success(id, serverMsgId) {

								}
							});
							console.log('this.chatType', this.chatType);
							console.log('respData.longitude', respData.longitude);
							console.log('respData.latitude', respData.latitude);

							// if(me.data.chatType == msgType.chatType.CHAT_ROOM){
							// 	msg.setGroup("groupchat");
							// }
							if (me.chatType == msgType.chatType.CHAT_ROOM) {
								msg.setGroup("groupchat");
							}
							// WebIM.conn.send(msg.body);
							try {
								console.log('发送了msg.body');
								that.$im.conn.send(msg.body);
								that.input_status = 1;
							} catch (e) {
								console.log(e);
							}

							// me.triggerEvent(
							// 	"newLocationMsg",
							// 	{
							// 		msg: msg,
							// 		type: msgType.LOCATION
							// 	},
							// 	{
							// 		bubbles: true,
							// 		composed: true
							// 	}
							// );
							uni.$emit('saveSendMsg', {
								msg: msg,
								type: msgType.TEXT,
							})
							this.userMessage = '';
							this.inputMessage = '';
						}
					},
					fail: (res) => {
						uni.showModal({
							title: '失败',
							content: '发送位置失败!',
						})
					}
				})
			},
			/*发送位置1*/
			commonMessageLocation() {
				var that = this,
					me = this;
				uni.chooseLocation({
					success: (respData) => {
						if (respData.address) {

							// var id = WebIM.conn.getUniqueId();
							let id = that.$im.conn.getUniqueId();
							//var msg = new WebIM.message(msgType.LOCATION, id);
							console.log('msgType.LOCATION', msgType.LOCATION);
							console.log('msgType.TEXT', msgType.TEXT);
							let msg = new that.$im.message(msgType.TEXT, id);
							console.log('respData的值', respData);
							msg.set({
								// location 需要消息值吗？写死不行？
								msg: "",
								// from: me.data.username.myName,
								from: this.username.myName,
								// to: me.getSendToParam(),
								to: this.getSendToParam(),
								roomType: false,
								lng: respData.longitude,
								lat: respData.latitude,
								addr: respData.address,
								// chatType: me.data.chatType,
								chatType: this.chatType,
								success(id, serverMsgId) {

								}
							});
							console.log('this.chatType', this.chatType);
							console.log('respData.longitude', respData.longitude);
							console.log('respData.latitude', respData.latitude);

							// if(me.data.chatType == msgType.chatType.CHAT_ROOM){
							// 	msg.setGroup("groupchat");
							// }
							if (me.chatType == msgType.chatType.CHAT_ROOM) {
								msg.setGroup("groupchat");
							}
							// WebIM.conn.send(msg.body);
							try {
								console.log('发送了msg.body');
								that.$im.conn.send(msg.body);
								that.input_status = 1;
							} catch (e) {
								console.log(e);
							}

							// me.triggerEvent(
							// 	"newLocationMsg",
							// 	{
							// 		msg: msg,
							// 		type: msgType.LOCATION
							// 	},
							// 	{
							// 		bubbles: true,
							// 		composed: true
							// 	}
							// );
							uni.$emit('newLocationMsg', {
								msg: msg,
								type: 'loc',
							})
							this.userMessage = '';
							this.inputMessage = '';
						}
					},
					fail: (res) => {
						uni.showModal({
							title: '失败',
							content: '发送位置失败!',
						})
					}
				})
			},
			/*失去焦点*/
			blur() {
				// this.$emit('inputBlured')
				// this.$refs.emoji.inputBlured();
			},
			/*得到焦点隐藏表情*/
			focus() {
				console.log("focus的值");
				// this.$emit('inputFocused')
				/*当前的影藏image窗口*/
				console.log('open_type_action的值', this.open_type_action);
				if (this.open_type_action == 1) {
					/*当前的影藏更多窗口*/
					this.$refs.emoji.cancelEmoji();
				} else if (this.open_type_action == 2) {
					this.$refs.more.cancelMore();
				}
			},
			/*发送消息*/
			inputBlured() {
				this.$emit('inputBlured');
			},
			toggleRecordModal() {
				this.$emit('tapSendAudio');
			},

			// sendVideo(){
			// 	this.data.__comps__.video.sendVideo();
			// },



			openEmoji() {
				console.log('打开表情');
				this.$refs.emoji.openEmoji();
				this.open_type_action = 1;
				//影藏更多窗口
				this.$refs.more.cancelMore();

			},
			openMore() {
				console.log('打开更多');
				this.$refs.more.openMore();
				this.open_type_action = 2;
				/*隐藏头像窗口*/
				this.$refs.emoji.cancelEmoji();
			},
			openMoreBox() {
				this.isShowEmojiBox = false
				this.isShowMoreBox = !this.isShowMoreBox;
				if(this.isShowMoreBox == false){
					this.$emit("closeMoreBox")
					
				} else {
					this.$emit("openMoreBox")
				}
				
			},
			openEmojiBox() {
				this.isShowMoreBox =false
				this.isShowEmojiBox = !this.isShowEmojiBox;
				if(this.isShowEmojiBox == false){
					this.$emit("closeEmojiBox")
					
				} else {
					this.$emit("openEmojiBox")
				}
				
			},
			cancelEmoji() {
				console.log('隐藏表情');
				this.$refs.emoji.cancelEmoji();

				//影藏更多窗口
				this.$refs.more.cancelMore();
			},
			openCamera() {
				console.log('打开相册');
				this.$refs.image.openCamera();
			},
			sendImage() {
				console.log('拍摄图片');
				this.$refs.image.sendImage();
			},

			sendLocation() {
				// this.data.__comps__.location.sendLocation();
			},
			emojiActionBySelf(emoji) {
				var str;
				var msglen = this.userMessage.length - 1;
				if (emoji && emoji != "[del]") {
					str = this.userMessage + emoji;
				} else if (emoji == "[del]") {
					let start = this.userMessage.lastIndexOf("[");
					let end = this.userMessage.lastIndexOf("]");
					let len = end - start;
					if (end != -1 && end == msglen && len >= 3 && len <= 4) {
						str = this.userMessage.slice(0, start);
					} else {
						str = this.userMessage.slice(0, msglen);
					}
				}
				this.userMessage = str,
					this.inputMessage = str
				//清空值
				// this.inputMessage ='';
			},
			// 输出 emoji
			sendEmoji(event){
				var emoji = event.target.dataset.emoji;
				this.triggerEvent(
					"newEmojiStr",
					{
						msg: emoji,
						type: msgType.EMOJI,
					},
					{
						bubbles: true,
						composed: true
					}
				);
			},
			/*点击表情调用自己的方法*/
			emojiAction(event) {
				console.log(event);
				var emojiMsg = event.currentTarget.dataset.emoji;
				var evt = {
					msg: emojiMsg,
					type: msgType.EMOJI,
				}
				
				var str, emoji = evt.msg;
				var msglen = this.userMessage.length - 1;
				if (emoji && emoji != "[del]") {
					str = this.userMessage + emoji;
				} else if (emoji == "[del]") {
					let start = this.userMessage.lastIndexOf("[");
					let end = this.userMessage.lastIndexOf("]");
					let len = end - start;
					if (end != -1 && end == msglen && len >= 3 && len <= 4) {
						str = this.userMessage.slice(0, start);
					} else {
						str = this.userMessage.slice(0, msglen);
					}
				}
				this.userMessage = str,
					this.inputMessage = str
			},
		}
	}
</script>

<style>
	.mg-common {
		margin: 0rpx 20rpx;
	}

	/*字体大小*/
	.news {
		background-color: white;
		/* display: flex;
		align-items: flex-start;
		-webkit-box-pack: center; */
		justify-content: center;
		height: 68rpx;
		margin-top: -10rpx;
		margin-left: 30rpx;
		padding-left: 25rpx;
		padding-top: 18rpx;
	}

	.view_group_size {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.font_group_size {
		font-size: 80rpx;
	}

	.font_group_size_small {
		font-size: 70rpx;
	}

	/*字体大小*/
	.room_bar {
		width: 100%;
		height: auto;
		border-top: 1px solid #CFCFCF;
		position: fixed;
		bottom: 0;
		right: 0;
		z-index: 1;
		/* background-color: #FFFFFF; */
		background-color: #F7F7F7;
		transform: translateZ(1000px);
	}

	.other_func {
		width: 100%;
		/* height: 60rpx; */
		height: 100rpx;
		display: flex;
	}

	.other_func_X {
		height: 128rpx;
	}

	.other_func image {
		width: 42rpx;
		height: 40rpx;
	}

	.open_emoji,
	.send_image,
	.open_camera,
	.v-record {
		width: 18rpx;
		height: 48rpx;
		margin-right: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 48rpx;
		margin-top: 13rpx;
	}


	.v-record .icon-record {
		width: 18rpx;
		height: 40rpx;
	}

	.v-record {
		margin-left: 48rpx;
	}

	.v-record:nth-of-type(3) {
		margin-left: 60rpx;
		margin-right: 50rpx;
	}

	.open_camera,
	.send_image {
		margin-left: 64rpx;
	}

	/*发送消息*/
	.send_btn_msg {
		/* width: 80rpx; */
		height: 80rpx;
		/* line-height: 60rpx; */
		font-size: 17px;
		color: #000;
		/* 	width:110rpx; */
		background-color: #0AC063;
		color: white;
		padding: 14rpx 28rpx;
		font-size: 32rpx;
		width: 170rpx;
		display: flex;
		align-items: center;
		float: right;
		margin: 8rpx 16rpx auto auto;
		/* 	background-color: #fff; */
		margin-top: -2rpx;
		margin-left: 40rpx;
	}


	/*--------------新样式-----------------*/
	.chat-room-box {
		/* position: fixed; */
		width: 100%;
	/* 	bottom: 0upx; 
		left: 0; */
	}

	.chat-fun-bar {
		background: #F5F3F6;
		height: 88upx;
		display: flex;
		padding: 8upx 15upx;
		width: 100%;
		align-items: center;
		box-sizing: border-box;
		
		/* justify-content: space-between; */

	}

	

	.chat-fun-input {
		width: 390upx;
		border-radius: 4px;
		line-height: 62upx;
		height: 62upx;
		padding: 0 12upx;
		box-sizing: border-box;
		/* padding:10upx; */
		font-size: 32upx;
		background: white;
		border: 1px solid #E4E2E5;
		margin: 0 20upx;
	}

	.chat-room-icon-box {

		color: #848285;
	}

	.chat-room-icon {
		font-size: 50upx;
	}

	.char-fun-barRight {
		display: flex;
		align-items: center;

	}

	.chat-more-box {
		border-top: 1px solid #E8E8EA;
		background: #F5F5F7;
		height: 460upx;
		box-sizing: border-box;
		padding: 50rpx 50rpx;
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	.chat-room-content{
		background: #F5F5F7;
		height:460upx;
	}
	.chat-more-item {
		text-align: center;
		margin-right: 50upx;
		width: 120upx;

		flex: 0 0 120upx;
	}

	.chat-more-item:nth-child(4n) {
		margin-right: 0upx;
	}
	@keyframes moreSlider{
		from{
			bottom:-460upx;
		}
		to{
			bottom:0upx;
		}
	}
	@keyframes emojiSlider{
		from{
			bottom:-460upx;
		}
		to{
			bottom:0upx;
		}
	}
	.more-slider-animation {
		animation: moreSlider .2s ;
	}
	.emoji-slider-animation{
		animation: emojiSlider .2s ;
	}

	.chat-more-img {
		height: 120upx; 
		width: 120upx;

		flex: 0 0 120upx;
		border: 1px solid #EFEFEF;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background: #FBFBFB;
	}

	.chat-more-font {
		font-size: 60upx;
		color: #6C6F76;
	}

	.chat-more-text {
		font-size: 28upx;
		color: #A5A5A7;
	}

	.chat-fun-swiper {
		height: 460upx;
	}


	.emoji-img-box {
		padding: 0 30upx;
		display: flex;
		flex-wrap: wrap;
	}

	

	.emoji-img {
		flex: 0 0 52upx;
		width: 52upx;
		height: 52upx;
		margin: 24upx;
		font-size:44upx;
	}
	.chat-fun-box{
		position: relative;
		height:460upx;
		transition: all .2s linear;
		/* bottom:-460upx; */
	}
	.chat-room-content {
		
	}
	
	.send-msg-btn{
		width:100upx;
		padding:8upx 0;
		color: white;
		background:#009900;
		font-size: 28upx;
		text-align: center;
		margin-left:20upx;
		border-radius: 4px;
	}
</style>
